<template>
  <div class="edit-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">党员信息{{ this.form.id?'编辑':'新增' }}</div>
    </div>
    <div class="page-body">
      <el-form
        inline
        label-width="175px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <div class="titleStyle">
          <span>基础信息</span>
        </div>
        <el-form-item prop="name" label="姓名">
          <el-input v-model="form.name" size="mini" />
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-select v-model="form.gender" size="mini">
            <el-option
              v-for="(item,index) in genderList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="contact" label="联系方式">
          <el-input v-model="form.contact" size="mini" />
        </el-form-item>
        <el-form-item prop="birthDate" label="出生日期">
          <el-date-picker
            v-model="form.birthDate"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item prop="origin" label="籍贯">
          <el-input v-model="form.origin" size="mini" />
        </el-form-item>
        <el-form-item prop="ethnicGroup" label="民族">
          <el-input v-model="form.ethnicGroup" size="mini" />
        </el-form-item>
        <el-form-item prop="placeHouseholdRegistration" label="户籍所在地">
          <el-input v-model="form.placeHouseholdRegistration" size="mini" />
        </el-form-item>
        <el-form-item prop="homeAddress" label="家庭住址">
          <el-input v-model="form.homeAddress" size="mini" />
        </el-form-item>
        <el-form-item prop="identificationNumber" label="身份证号">
          <el-input v-model="form.identificationNumber" size="mini" />
        </el-form-item>
        <el-form-item prop="occupationWork" label="工作职业">
          <el-select v-model="form.occupationWork" size="mini">
            <el-option
              v-for="(item,index) in workList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="currentWorkUnit" label="现工作单位">
          <el-input v-model="form.currentWorkUnit" size="mini" />
        </el-form-item>
        <el-form-item prop="photoId" label="照片">
          <el-upload
            v-model="form.photoId"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :multiple="false"
            :limit="1"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <div class="titleStyle">
          <span>党籍信息</span>
        </div>
        <el-form-item prop="joinPartyUnit" label="入党单位">
          <el-input v-model="form.joinPartyUnit" size="mini" />
        </el-form-item>
        <el-form-item prop="branchJoinedParty" label="入党所在支部">
          <el-input v-model="form.branchJoinedParty" size="mini" />
        </el-form-item>
        <el-form-item prop="joinPartyTime" label="入党时间">
          <el-date-picker
            v-model="form.joinPartyTime"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item prop="conversionTime" label="转正时间">
          <el-date-picker
            v-model="form.conversionTime"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item prop="partAge" label="党龄">
          <el-input v-model="form.partAge" size="mini" />
        </el-form-item>
        <el-form-item prop="partyMember" label="党员身份">
          <el-select v-model="form.partyMember" size="mini">
            <el-option
              v-for="(item,index) in partyMemberList"
              :key="index"
              :value="index"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <div class="titleStyle">
          <span>组织信息</span>
        </div>
        <el-form-item prop="branchId" label="所在支部">
          <ClassifyTreeSelect @input="getBranchId" @getValue="getBranchNode" :value="form.branchId" size="mini" />
        </el-form-item>
        <el-form-item prop="partyPositionsId" label="党内职务">
          <el-select v-model="form.partyPositionsId" size="mini">
            <el-option
              v-for="item in positionList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="positionLevelId" label="职位级别">
          <el-select v-model="form.positionLevelId" size="mini">
            <el-option
              v-for="item in positionLevelList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="inflowTime" label="流入时间">
          <el-date-picker
            v-model="form.inflowTime"
            size="mini"
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <div class="titleStyle">
        <span>人物履历</span>
        <el-button type="success" size="mini" @click="add('resume')">添加</el-button>
      </div>
      <el-table
        :data="resumeData"
      >
        <el-table-column align="center" width="360" label="履历日期">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.date"
              size="mini"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="(val)=>resumeDateChange(val,scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="人物履历">
          <template slot-scope="scope">
            <el-input
              size="mini"
              type="textarea"
              :rows="2"
              v-model="scope.row.characterBiog"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index,'resume')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="titleStyle">
        <span>党内荣誉</span>
        <el-button type="success" size="mini" @click="add('honor')">添加</el-button>
      </div>
      <el-table
        :data="honorData"
      >
        <el-table-column align="center" width="240" label="获得日期">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.gainTime"
              size="mini"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="获得荣誉">
          <template slot-scope="scope">
            <el-input
              size="mini"
              type="textarea"
              :rows="2"
              v-model="scope.row.honors"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index,'honor')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="titleStyle">
        <span>党内处罚</span>
        <el-button type="success" size="mini" @click="add('punish')">添加</el-button>
      </div>
      <el-table
        :data="punishData"
      >
        <el-table-column align="center" width="240" label="处罚日期">
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.punishmentTime"
              size="mini"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="处罚内容">
          <template slot-scope="scope">
            <el-input
              size="mini"
              type="textarea"
              :rows="2"
              v-model="scope.row.punishmentContent"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" width="80" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              style="color:#F56C6C;"
              @click="del(scope.$index,'punish')"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-footer">
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { add, edit, queryPositionsList, queryPositionsLevelList } from '@/api/partyMemberManagement/memberInformationManagement'
export default {
  components: { ClassifyTreeSelect },
  data () {
    return {
      form: {},
      resumeData: [],
      honorData: [],
      punishData: [],
      genderList: ['男', '女'],
      positionList: [],
      positionLevelList: [],
      partyMemberList: ['正式党员', '组织关系转出', '失联', '清退', '死亡', '开除党籍'],
      workList: ['党的机关、国家机关、群众团体和社会组织、企事业单位负责人', '专业技术人员', '办事人员和有关人员', '社会生产服务和生活服务人员', '农、林、牧、渔业生产及辅助人员', '生产制造及有关人员', '军人', '学生', '不便分类的其他从业人员', '退休'],
      rules: {
        name: [ { required: true, message: '请输入姓名', trigger: 'change' } ],
        gender: [ { required: true, message: '请选择性别', trigger: 'change' } ],
        contact: [ { required: true, message: '请输入联系方式', trigger: 'change' } ],
        birthDate: [ { required: true, message: '请选择出生日期', trigger: 'change' } ],
        origin: [ { required: true, message: '请输入籍贯', trigger: 'change' } ],
        ethnicGroup: [ { required: true, message: '请输入民族', trigger: 'change' } ],
        placeHouseholdRegistration: [ { required: true, message: '请输入户籍所在地', trigger: 'change' } ],
        homeAddress: [ { required: true, message: '请输入家庭住址', trigger: 'change' } ],
        identificationNumber: [ { required: true, message: '请输入身份证号', trigger: 'change' } ],
        occupationWork: [ { required: true, message: '请选择工作职业', trigger: 'change' } ],
        currentWorkUnit: [ { required: true, message: '请输入现工作单位', trigger: 'change' } ],
        joinPartyUnit: [ { required: true, message: '请输入入党单位', trigger: 'change' } ],
        branchJoinedParty: [ { required: true, message: '请输入入党所在支部', trigger: 'change' } ],
        joinPartyTime: [ { required: true, message: '请选择入党时间', trigger: 'change' } ],
        conversionTime: [ { required: true, message: '请选择转正时间', trigger: 'change' } ],
        partyMember: [ { required: true, message: '请选择党员身份', trigger: 'change' } ],
        branchId: [ { required: true, message: '请选择所在支部', trigger: 'change' } ],
        partyPositionsId: [ { required: true, message: '请选择党内职务', trigger: 'change' } ],
        positionLevelId: [ { required: true, message: '请选择职位级别', trigger: 'change' } ],
        inflowTime: [ { required: true, message: '请选择流入时间', trigger: 'change' } ]
      }
    }
  },
  methods: {
    init (row) {
      this.getPositionList()
      this.getPositionLevelList()
      this.form = { ...row }
      this.resumeData = row.characterBiographiesVOList || []
      this.honorData = row.intraPartyHonorsVOList || []
      this.punishData = row.intraPartyPunishmentVOList || []
      this.resumeData.map((item) => {
        item.date = [item.startTime, item.endTime]
      })
    },
    getPositionList () {
      queryPositionsList().then((res) => {
        this.positionList = res?.data || []
      })
    },
    getPositionLevelList () {
      queryPositionsLevelList().then((res) => {
        this.positionLevelList = res?.data || []
      })
    },
    goback () {
      this.form = {}
      this.resumeData = []
      this.honorData = []
      this.punishData = []
      this.$emit('goback', false)
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let submitForm = add
          if (this.form.id) {
            submitForm = edit
          }
          delete this.form.characterBiographiesVOList
          delete this.form.intraPartyHonorsVOList
          delete this.form.intraPartyPunishmentVOList
          this.resumeData.map((item) => {
            delete item.date
          })
          const obj = {
            ...this.form,
            characterBiographiesDTOList: this.resumeData,
            intraPartyHonorsDTOList: this.honorData,
            intraPartyPunishmentDTOList: this.punishData
          }
          submitForm(obj).then((res) => {
            this.$message.success('保存成功')
            this.form = {}
            this.resumeData = []
            this.honorData = []
            this.punishData = []
            this.$emit('goback', true)
          })
        }
      })
    },
    getBranchNode (node) {
      this.form.branchId = node?.id || null
      this.form.branchName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    resumeDateChange (val, row) {
      row.startTime = val[0]
      row.endTime = val[1]
    },
    add (type) {
      const obj = {}
      this[`${type}Data`].unshift(obj)
    },
    del (index, type) {
      const arr = JSON.parse(JSON.stringify(this[`${type}Data`]))
      arr.splice(index, 1)
      this[`${type}Data`] = arr
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    height: calc(100vh - 190px);
    overflow-y: auto;
    .el-form-item {
      width: calc(50% - 24px);
      ::v-deep .el-input__inner {
        width: 300px;
      }
    }
    .titleStyle {
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
      background-color: #d8eff9;
      display: flex;
      justify-content: space-between;
    }
  }
  .page-footer {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
</style>
